<template>
  <div class="my-work-container">
    <div class="module-title-container">
      <div class="module-title">工作经历</div>
    </div>

    <div class="my-work-wrapper">
      <div class="work-card">
        <div class="company-logo">
          <img :src="dekeinfoLogo" alt="deko-logo" />
        </div>
        <div class="company-info-wrapper">
          <div class="company-name-wrapper">
            <div class="company-name">德科信息有限公司</div>
            <div class="work-status">
              <a-tag color="processing">实习</a-tag
              ><a-tag color="success">转正</a-tag>
            </div>
            <div class="work-period">2024.07 - 2025.10</div>
          </div>
          <div class="company-desc">
            德科信息有限公司(简称:深德科)2010年创立于深圳,始终秉持"求真务实,厚积薄发"的长期经营理念。历经十余载技术深耕与行业积淀,已稳健发展为国内领先的数字技术服务与大型软件解决方案提供商。
          </div>
          <div class="work-position">前端开发工程师</div>
          <div class="work-desc">
            <ul>
              <li>
                负责公司满天星和官网项目的前端开发，使用Vue、React等框架进行开发。
              </li>
              <li>
                负责公司所有AI项目的设计与开发，承担公司所有AI外包项目的技术支持。
              </li>
            </ul>
          </div>
          <div class="company-honor">在司荣誉</div>
          <div class="work-desc">
            <ul>
              <li>
                2024年11月代表公司独立参加<b>华为云开发者大赛并闯入总决赛。</b>
              </li>
              <li>在2024年12月、2025年5月、2025年9月获得<b>月度优秀员工</b></li>
              <li>开发的《智能招聘需求分析与匹配管理系统》<b>获得软著。</b></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="work-card">
        <div class="company-logo">
          <img :src="zqdataLogo" alt="deko-logo" />
        </div>
        <div class="company-info-wrapper">
          <div class="company-name-wrapper">
            <div class="company-name">中清数据(广州)科技有限公司</div>
            <div class="work-status">
              <a-tag color="processing">实习</a-tag>
            </div>
            <div class="work-period">2023.07 - 2024.06</div>
          </div>
          <div class="company-desc">
            德科信息有限公司(简称:深德科)2010年创立于深圳,始终秉持"求真务实,厚积薄发"的长期经营理念。历经十余载技术深耕与行
            业积淀,已稳健发展为国内领先的数字技术服务与大型软牛解决方案提供商。
          </div>
          <div class="work-position">全栈开发实习生</div>
          <div class="work-desc">
            <ul>
              <li>
                主导<b>筹建跨学科实验室</b>，设计「项目孵化-资源对接-成果转化」管理体系,搭答建跨部门协作流程(需求对接-进度追踪-成果验收)，制定《实验室周报模板》等4类标准化文档。
              </li>
              <li>
                实施<b>月度OKR考核</b>，建立「1+3」例会机制(周四组会+部门例会)，主持协作会议推动项目成果落地；联动<b>华南理工大学与外企资源</b>，推动实验室入选<b>校级重点科创平台</b>，获<b>广东省"百千万工程"专项支持</b>。
              </li>
              <li>
                负责承担中清数据(广州)科技有限公司<b>部分设计与开发工作</b>:名片小程序、郁南无核黄皮直播商城小程序、<b>大语言模型应用开发</b>。
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, nextTick } from "vue";

const dekeinfoLogo =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/work/dekeinfo.png";
const zqdataLogo =
  "https://person-web.obs.cn-south-1.myhuaweicloud.com/work/zqdata.png";

onMounted(() => {
  // 使用nextTick确保DOM已完全渲染
  nextTick(() => {
    // 创建Intersection Observer实例
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry, index) => {
          if (entry.isIntersecting) {
            // 当元素进入视窗时，添加动画类
            entry.target.style.animationDelay = `${index * 0.3 + 0.4}s`;
            entry.target.classList.add("animate-in");
          } else {
            // 当元素离开视窗时，移除动画类，以便下次进入时可以再次播放
            entry.target.classList.remove("animate-in");
          }
        });
      },
      {
        threshold: 0.1, // 当10%的元素可见时触发
      }
    );
    // 观察所有标题容器
    const cardContainers = document.querySelectorAll(".work-card");
    cardContainers.forEach((container) => {
      observer.observe(container);
    });
  });
});
</script>

<style lang="scss" scoped>
.my-work-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: #f8f9fa;
  padding: 100px 200px;

  .module-title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
  }

  .my-work-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: max-content;
    gap: 100px;

    .work-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 500px;
      height: 700px;
      margin-bottom: 50px;
      border-radius: 16px;
      background-color: #fff;
      overflow: hidden;
      opacity: 0;

      .company-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 300px;
        padding: 20px;
        background-color: #f0f0f0;

        img {
          height: 100px;
        }
      }

      .company-info-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px;
        gap: 10px;
      }

      .company-name-wrapper {
        display: flex;
        align-items: center;
        width: 100%;

        .company-name {
          font-size: 18px;
          font-weight: bold;
        }

        .work-status {
          display: flex;
          margin-left: 10px;
        }

        .work-period {
          font-size: 14px;
          margin-left: auto;
          color: #666;
        }
      }

      .company-desc {
        font-size: 14px;
        color: #999;
        text-align: justify;
      }

      .work-position {
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }

      .work-desc {
        font-size: 14px;
        color: #666;
        text-align: justify;
        ul {
          padding-left: 20px;
          line-height: 1.5em;
          margin: 0px;
        }
      }

      .company-honor {
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }
    }

    // 当元素进入视窗时添加的动画类
    .animate-in {
      animation: popIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;

      @keyframes popIn {
        0% {
          transform: scale(0.95) translateY(40px);
          opacity: 0;
        }

        100% {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
      }
    }
  }
}
</style>
